<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {ElMessage} from 'element-plus'

import {SelectOption, SelectOptionC} from '@/types/global.d'
import {ContractC} from '@/types/contractC'

import {listFirstParties} from '@/api/firstParty'
import {listEmployees} from '@/api/employee'
import {getContract, saveContract, updateContract} from '@/api/contract'

const visible = ref(false)
const dataFormRef = ref()
const dataForm = ref<Contract>(new ContractC())

const dataRule = ref({
  contractNumber: [{
    required: true,
    message: '合同编号不能为空',
    trigger: 'blur',
  }],
  contractName: [{
    required: true,
    message: '合同名称不能为空',
    trigger: 'blur',
  }],
  startTime: [{
    required: true,
    message: '请选择合同开始日期',
    trigger: 'blur',
  }],
  endTime: [{
    required: true,
    message: '请选择合同结束日期',
    trigger: 'blur',
  }],
  signingDate: [{
    required: true,
    message: '请选择合同签订日期',
    trigger: 'blur',
  }],
})

const firstPartyOptions = ref<SelectOption[]>([])
const secondPartyOptions = ref<SelectOption[]>([])

function init(id: number) {
  visible.value = true
  nextTick(async () => {
    dataFormRef.value.resetFields()
    if (id) {
      dataForm.value = await getContract(id)
    }
    const data1 = await listFirstParties()
    firstPartyOptions.value = data1.records.map(value => {
      const option = new SelectOptionC()
      option.label = value.firstPartyName
      option.value = value.id
      return option
    })
    const data2 = await listEmployees()
    secondPartyOptions.value = data2.records.map(value => {
      const option = new SelectOptionC()
      option.label = value.employeeName
      option.value = value.id
      return option
    })
  })
}

const emits = defineEmits(['refreshDataList'])

// 表单提交
async function dataFormSubmit() {
  console.log('save contract: ', dataForm.value)
  if (dataForm.value.id) {
    await updateContract(dataForm.value)
  } else {
    await saveContract(dataForm.value)
  }
  visible.value = false
  emits('refreshDataList')
  ElMessage({
    type: 'success',
    message: '操作成功',
    duration: 1000,
  })
}

defineExpose({
  init,
})
</script>

<template>
  <el-dialog
    v-model="visible"
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="150px"
      @keyup.enter="dataFormSubmit()"
    >
      <el-form-item label="合同编号" prop="contractNumber">
        <el-input
          v-model="dataForm.contractNumber"
          placeholder="合同编号"
        />
      </el-form-item>
      <el-form-item label="合同名称" prop="contractName">
        <el-input
          v-model="dataForm.contractName"
          placeholder="合同名称"
        />
      </el-form-item>

      <el-form-item label="合同开始日期" prop="startTime">
        <el-date-picker
          v-model="dataForm.startTime"
          type="date"
          placeholder="选择合同开始日期"
        />
      </el-form-item>
      <el-form-item label="合同结束日期" prop="endTime">
        <el-date-picker
          v-model="dataForm.endTime"
          type="date"
          placeholder="选择合同结束日期"
        />
      </el-form-item>

      <el-form-item label="合同签订日期" prop="signingDate">
        <el-date-picker
          v-model="dataForm.signingDate"
          type="date"
          placeholder="选择合同签订日期"
        />
      </el-form-item>

      <el-form-item label="合同金额" prop="contractPrice">
        <el-input
          v-model="dataForm.contractPrice"
          placeholder="合同金额"
        />
      </el-form-item>
      <el-form-item label="甲方" prop="firstPartyId">
        <el-select v-model="dataForm.firstPartyId" placeholder="请选择甲方">
          <el-option
            v-for="item in firstPartyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="乙方" prop="secondPartyId">
        <el-select v-model="dataForm.secondPartyId" placeholder="请选择乙方">
          <el-option
            v-for="item in secondPartyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
